<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:layOut="http://www.w3.org/1999/xhtml"
      layOut:decorator="layOut/echarts">
<head>
    <title>饼状图</title>
</head>
<body class="pear-container">

<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="proportion" style="background-color:#ffffff;min-height:650px;padding: 10px"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" th:inline="javascript">
    const map = [[${map}]];
</script>

<script type="text/javascript">
    const myChart = echarts.init(document.getElementById('proportion'), null, {
        renderer: 'canvas',
        useDirtyRect: false
    });

    const data = [];
    for (const key in map) {
        data.push({"name":key, "value":map[key]})
    }
    const option = {
        title: {text: '', left: 'center'},
        tooltip: {trigger: 'item'},
        series: [
            {
                name: '',
                type: 'pie',
                radius: '50%',
                data: data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>